<template>
  <!--
   * @FileDescription: 未归人数
   * @author Sun Yan
   * @Date $
  -->
  <opacity-card-frame class="academy-unreturned-container" title="未归人员数">
    <div ref="timeChart2" style="height: calc(100% - 32px); width: 100%"></div>
  </opacity-card-frame>
</template>
<script>
import {throttle} from "@u";

/**
 * @description: 方法描述
 * @param {参数类型} 参数名称
 * @param {参数类型} 参数名称
 * @return void
 */

import {getVirtulData, cellSize, getPieSeriesUpdate, getPieSeries, pieRadius} from "@/js/academy-details";

var scatterData = getVirtulData();

export default {
  name: "academy-unreturned",
  data() {
    return {
      timeEcharts2: null,
    }
  },

  created() {
    window.addEventListener("resize", this.mianResize)
  },

  props: {},

  inject: {
    '_unreturnedOptions': '_unreturnedOptions',
  },

  computed: {

    unreturnedOptions() {
      return this._unreturnedOptions();
    },

    options() {
      return {
        // backgroundColor: '#f7d673', // 背景颜色透明
        // height: '100',
        // width: '100',
        bottom: 0,
        tooltip: {
          extraCssText: 'z-index: 2',

        },

        // legend: {
        //   data: ['北里莫', '交换生', '教职工'],
        //   top: 10,
        //   right: 10,
        //   itemHeight: 9,//改变圆圈大小
        //   // icon: "circle",
        //   textStyle: {
        //     color: '#FFF'  // 图例文字颜色
        //   }
        // },

        visualMap: {
          // type: 'continuous',
          min: 0,
          max: 1000,
          right: '10',
          top: '10',
          itemWidth: 10,
          itemHeight: 160,
          // align: 'right',
          range: [0, 1000],
          calculable: true,
          realtime: true,
          orient: 'horizontal', //vertical
          // color: ['#bf444c', '#d88273', '#f6efa6'],
          textStyle: {
            color: '#FFF'
          },

          inRange: {
            color: ['#ecfa79', '#4cd964', '#52ffff', '#007aff']
          },
        },


        calendar: {
          right: 30,
          left: 30,
          top: 80,
          bottom: 120,
          orient: 'vertical',
          cellSize: cellSize,

          yearLabel: {
            show: false,
            // fontSize: 30,
            // radioSize: ['40%', '80%'],
          },

          splitLine: {
            show: false,
            lineStyle: {
              // 设置月份分割线的颜色
              color: '#D3D3D3',
              width: 4,
              type: 'solid'
            }
          },

          dayLabel: {
            // backgroundColor: '#ff4f5e',
            margin: 10,
            firstDay: 1,
            nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            color: '#FFF',
          },


          itemStyle: {
            normal: {
              // 设置背景颜色
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              // 设置方块分割线段颜色
              borderColor: 'rgba(0,0,0,0)',
            }
          },

          monthLabel: {
            show: false
          },
          range: ['2017-02']
        },

        series: [
          {
            // id: 'label',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
              // backgroundColor: '#ff4f5e',
              show: true,
              formatter: function (params) {
                return echarts.format.formatTime('d', params.value[0]);
              },
              // offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
              fontSize: 12,
              color: '#FFF'
            },
            data: scatterData
          }
        ]
      };
    }
  },

  watch: {
    options: {
      immediate: true,
      handler: function () {
        this.$nextTick(_ => this.setEchartData());
      },
    }
  },


  methods: {
    //echart options 数据 完毕调用
    setEchartData() {
      this.$nextTick(_ => {
        const timeChart2 = this.$refs.timeChart2 || {};

        if (this.timeEcharts2 === null) {
          this.timeEcharts2 = echarts.init(timeChart2)
          this.timeEcharts2.setOption(this.options)
          this.timeEcharts2.setOption({
            series: getPieSeries(scatterData, this.timeEcharts2, 'one')
          });
        } else {
          this.timeEcharts2.clear();
          this.timeEcharts2.setOption(this.options)
        }
      })
    },

    mianResize: throttle(function () {
      this.$nextTick(_ => {
        const timeChart2 = this.$refs.timeChart2 || {};
        this.timeEcharts2 && this.timeEcharts2.resize({
          height: `${timeChart2.clientHeight}px`,
          width: `${timeChart2.clientWidth}px`
        });
        this.timeEcharts2 = echarts.init(timeChart2)
        this.timeEcharts2.setOption(this.options)
        this.timeEcharts2.setOption({
          series: getPieSeriesUpdate(scatterData, this.timeEcharts2)
        });

      })
    }),

  }
}
</script>

<style scoped>

</style>